<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Skitter - Slideshow for anytime!</title>
	
	<meta name="description" content="Slideshow flexible with many options for customizations. This jQuery Slideshow is free!" />
	<meta name="keywords" content="jquery slideshow, slides, slide, slideshow, gallery, images, effects, easing, transitions, jquery, plugin, gpl license, free, customizations, flexible" />
	<meta name="author" content="Thiago S.F. - http://thiagosf.net" />
	
	<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>
	
	<link rel="shortcut icon" href="images/favicon.ico">
	<link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />
	<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
	<link href="css/highlight.black.css" type="text/css" media="all" rel="stylesheet" />
	<link href="css/sexy-bookmarks-style.css" type="text/css" media="all" rel="stylesheet" />
	
	<script src="js/jquery-1.6.3.min.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.animate-colors-min.js"></script>
	
	<script src="js/jquery.skitter.min.js"></script>
	<script src="js/highlight.js"></script>
	<script src="js/sexy-bookmarks-public.js"></script>
	
	<script>
	$(document).ready(function() {
		
		var options = {};
	
		if (document.location.search) {
			var array = document.location.search.split('=');
			var param = array[0].replace('?', '');
			var value = array[1];
			
			if (param == 'animation') {
				options.animation = value;
			}
			else if (param == 'type_navigation') {
				if (value == 'dots_preview') {
					$('.border_box').css({'marginBottom': '40px'});
					options['dots'] = true;
					options['preview'] = true;
				}
				else {
					options[value] = true;
					if (value == 'dots') $('.border_box').css({'marginBottom': '40px'});
				}
			}
		}
		
		$('.box_skitter_large').skitter(options);
		
		// Highlight
		$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
		
	});
	</script>
</head>
<body>
<div id="page">
	<div id="header">

		<h1><a href="http://thiagosf.net/projects/jquery/skitter">Skitter</a></h1>
		<p>Slideshow for anytime!</p>
	</div>
	
	<div id="content">
		<div class="border_box">
			<div class="box_skitter box_skitter_large">
				<ul>
					<li><a href="#cube"><img src="images/001.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>
					<li><a href="#cubeRandom"><img src="images/002.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>
					<li><a href="#block"><img src="images/003.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>
					<li><a href="#cubeStop"><img src="images/004.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li>
					<li><a href="#cubeHide"><img src="images/005.jpg" class="cubeHide" /></a><div class="label_text"><p>cubeHide</p></div></li>
					<li><a href="#cubeSize"><img src="images/006.jpg" class="cubeSize" /></a><div class="label_text"><p>cubeSize</p></div></li>
					<li><a href="#horizontal"><img src="images/007.jpg" class="horizontal" /></a><div class="label_text"><p>horizontal</p></div></li>
					<li><a href="#showBars"><img src="images/008.jpg" class="showBars" /></a><div class="label_text"><p>showBars</p></div></li>
					<li><a href="#showBarsRandom"><img src="images/009.jpg" class="showBarsRandom" /></a><div class="label_text"><p>showBarsRandom</p></div></li>
					<li><a href="#tube"><img src="images/010.jpg" class="tube" /></a><div class="label_text"><p>tube</p></div></li>
					<li><a href="#fade"><img src="images/011.jpg" class="fade" /></a><div class="label_text"><p>fade</p></div></li>
					<li><a href="#fadeFour"><img src="images/012.jpg" class="fadeFour" /></a><div class="label_text"><p>fadeFour</p></div></li>
					<li><a href="#paralell"><img src="images/013.jpg" class="paralell" /></a><div class="label_text"><p>paralell</p></div></li>
					<li><a href="#blind"><img src="images/014.jpg" class="blind" /></a><div class="label_text"><p>blind</p></div></li>
					<li><a href="#blindHeight"><img src="images/015.jpg" class="blindHeight" /></a><div class="label_text"><p>blindHeight</p></div></li>
					<li><a href="#blindWidth"><img src="images/016.jpg" class="blindWidth" /></a><div class="label_text"><p>blindWidth</p></div></li>
					<li><a href="#directionTop"><img src="images/017.jpg" class="directionTop" /></a><div class="label_text"><p>directionTop</p></div></li>
					<li><a href="#directionBottom"><img src="images/018.jpg" class="directionBottom" /></a><div class="label_text"><p>directionBottom</p></div></li>
					<li><a href="#directionRight"><img src="images/019.jpg" class="directionRight" /></a><div class="label_text"><p>directionRight</p></div></li>
					<li><a href="#directionLeft"><img src="images/020.jpg" class="directionLeft" /></a><div class="label_text"><p>directionLeft</p></div></li>
					<li><a href="#cubeStopRandom"><img src="images/021.jpg" class="cubeStopRandom" /></a><div class="label_text"><p>cubeStopRandom</p></div></li>
					<li><a href="#cubeSpread"><img src="images/022.jpg" class="cubeSpread" /></a><div class="label_text"><p>cubeSpread</p></div></li>				
				</ul>
			</div>
		</div>
		
		<div id="examples-animations">
			<div>
				<a href="?" class="selected">all</a>
				<a href="?animation=cube" class="">cube</a>
				<a href="?animation=cubeRandom" class="">cubeRandom</a>
				<a href="?animation=block" class="">block</a>
				<a href="?animation=cubeStop" class="">cubeStop</a>
				<a href="?animation=cubeHide" class="">cubeHide</a>
				<a href="?animation=cubeSize" class="">cubeSize</a>
				<a href="?animation=horizontal" class="">horizontal</a>
				<a href="?animation=showBars" class="">showBars</a>
				<a href="?animation=showBarsRandom" class="">showBarsRandom</a>
				<a href="?animation=tube" class="">tube</a>
				<a href="?animation=fade" class="">fade</a>
				<a href="?animation=fadeFour" class="">fadeFour</a>
				<a href="?animation=paralell" class="">paralell</a>
				<a href="?animation=blind" class="">blind</a>
				<a href="?animation=blindHeight" class="">blindHeight</a>
				<a href="?animation=blindWidth" class="">blindWidth</a>
				<a href="?animation=directionTop" class="">directionTop</a>
				<a href="?animation=directionBottom" class="">directionBottom</a>
				<a href="?animation=directionRight" class="">directionRight</a>
				<a href="?animation=directionLeft" class="">directionLeft</a>
				<a href="?animation=cubeStopRandom" class="">cubeStopRandom</a>
				<a href="?animation=cubeSpread" class="">cubeSpread</a>
				<a href="?animation=cubeJelly" class="">cubeJelly</a>
				<a href="?animation=glassCube" class="">glassCube</a>
				<a href="?animation=glassBlock" class="">glassBlock</a>
				<a href="?animation=circles" class="">circles</a>
				<a href="?animation=circlesInside" class="">circlesInside</a>
				<a href="?animation=circlesRotate" class="">circlesRotate</a>
				<a href="?animation=cubeShow" class="">cubeShow<span class="new_animation">new!</span></a>
				<a href="?animation=upBars" class="">upBars<span class="new_animation">new!</span></a>
				<a href="?animation=downBars" class="">downBars<span class="new_animation">new!</span></a>
				<a href="?animation=random" class="">random</a>
				<a href="?animation=randomSmart" class="">randomSmart</a>
			</div>
		</div>
		
		<div style="clear:both"></div>
		
		<div id="styles_navigation">
			<h2>Type of loading</h2>
			<ul>
				<li><a href="?type_loading=html" class="selected">HTML</a></li>
				<li><a href="?type_loading=xml" class="">XML</a></li>
			</ul>
		</div>
		
		<div id="styles_navigation">
			<h2>Type of navigation</h2>
			<ul>
				<li><a href="?type_navigation=numbers" class="selected">Numbers</a></li>
				<li><a href="?type_navigation=thumbs" class="">Thumbs</a></li>
				<li><a href="?type_navigation=dots" class="">Dots</a></li>
				<li><a href="?type_navigation=dots_preview" class="">Dots with preview</a><span class="new">new!</span></li>
			</ul>
		</div>
		
		<div id="styles_navigation">

			<h2>Other options</h2>
			<ul>
				<li><a href="?other_options=normal" class="">Normal</a></li>
				<li><a href="?other_options=hideTools" class="">HideTools</a></li>
				<li><a href="fullscreen.html" class="">Fullscreen</a></li>
				<li><a href="?other_options=show_randomly" class="">Randomly Sliders</a></li>
			</ul>
		</div>
		
		<div id="styles_navigation">
			<h2>Other view</h2>
			<ul>
				<li><a href="?other_options=mini" class="">Mini-slides</a></li>
				<li><a href="multiple.html" class="">Multiple instances</a></li>
			</ul>
		</div>
		
		<div id="download">
			<a href="https://github.com/thiagosf/SkitterSlideshow" id="botao_download"><img src="images/download-button.png" /></a>
			<a href="http://wordpress.org/extend/plugins/wp-skitter-slideshow/" id="botao_wp"><img src="images/download-wp.png" /></a>
			<a href="http://thiagosf.net/cakephp/skitter_helper/" id="botao_helper"><img src="images/download-helper.png" /></a>
		</div>
		
		<div id="box_share">
			<div class="sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center sexy-bookmarks-bg-sexy">
				<ul class="socials">
					<li class="sexy-delicious"><a href="http://del.icio.us/post" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a></li>

					<li class="sexy-facebook"><a href="http://www.facebook.com/share.php" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a></li>
					<li class="sexy-digg"><a href="http://digg.com/submit" rel="nofollow" class="external" title="Digg this!">Digg this!</a></li>
					<li class="sexy-twitter"><a href="http://twitter.com/home" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li>
					<li class="sexy-twittley"><a href="http://twittley.com/submit/" rel="nofollow" class="external" title="Submit this to Twittley">Submit this to Twittley</a></li>
					
					<li class="sexy-yahoobuzz"><a href="http://buzz.yahoo.com/submit/" rel="nofollow" class="external" title="Buzz up!">Buzz up!</a></li>
					<li class="sexy-myspace"><a href="http://www.myspace.com/Modules/PostTo/Pages/" rel="nofollow" class="external" title="Post this to MySpace">Post this to MySpace</a></li>

					<li class="sexy-google"><a href="http://www.google.com/bookmarks/mark" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a></li>

					<li class="sexy-scriptstyle"><a href="http://scriptandstyle.com/submit" rel="nofollow" class="external" title="Submit this to Script &amp; Style">Submit this to Script &amp; Style</a></li>
					<li class="sexy-reddit"><a href="http://reddit.com/submit" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a></li>
					<li class="sexy-stumbleupon"><a href="http://www.stumbleupon.com/submit" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a></li>
					<li class="sexy-mixx"><a href="http://www.mixx.com/submit" rel="nofollow" class="external" title="Share this on Mixx">Share this on Mixx</a></li>

					<li class="sexy-technorati"><a href="http://technorati.com/faves" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a></li>
					<li class="sexy-blinklist"><a href="http://www.blinklist.com/index.php" rel="nofollow" class="external" title="Share this on Blinklist">Share this on Blinklist</a></li>
					<li class="sexy-diigo"><a href="http://www.diigo.com/post">Post this on Diigo</a></li>
					
					<li class="sexy-designfloat"><a href="http://www.designfloat.com/submit.php" rel="nofollow" class="external" title="Submit this to DesignFloat">Submit this to DesignFloat</a></li>
					<li class="sexy-newsvine"><a href="http://www.newsvine.com/_tools/seed&amp;save" rel="nofollow" class="external" title="Seed this on Newsvine">Seed this on Newsvine</a></li>
					
				</ul>

			</div>
		</div>
		
		<h2>Updatelog</h2>
		<div id="updatelog">
			<dl>
				<dt>04/09/2012</dt>
					<dd>- Bug jquery 1.8 fixed: update jquery-color-animation</dd>
				<dt>19/04/2012</dt>
					<dd>- Bug fixed: in IE was jumping two slides to start.</dd>
					<dd>- Bug fixed: conflict between the options <strong>progressbar</strong> and <strong>auto_play</strong>.</dd>
					<dd>- New animations: <a href="?animation=swapBlocks">swapBlocks</a>, <a href="?animation=cut">cut</a></dd>
				<dt>07/04/2012</dt>
					<dd>- Added with_animations: specific animations.</dd>
					<dd>- Added auto_play: sets whether the slideshow will start automatically.</dd>
					<dd>- Thumbs: improved code.</dd>
				<dt>02/02/2012</dt>
					<dd>- Bug fixed: start slideshow with mouse over</dd>
					<dd>- Bug fixed: animations circles, circlesInside and circlesRotate on Webkit.</dd>
					<dd>- New animations: <a href="?animation=hideBars">hideBars</a>, <a href="?animation=swapBars">swapBars</a>, <a href="?animation=swapBarsBack">swapBarsBack</a></dd>
				<dt>26/12/2011</dt>
					<dd>- Redesign of the site!</dd>
					<dd>- Added <a href="?enable_navigation_keys=true">enable navigation keys</a></dd>
				<dt>18/12/2011</dt>
					<dd>- Added progress bar</dd>
					<dd>- Option does not stop the slideshow go over.</dd>
					<dd>- Modifications to existing animations.</dd>
					<dd>- New animations: cubeShow, upBars, downBars</dd>
					<dd>- Bug fixed: stop slideshow to blur window.</dd>
				<dt>08/12/2011</dt>
					<dd>- Controls: <a href="?controls=center">option play/pause manually.</a></dd>
					<dd>- <a href="?focus=center">Focus slideshow</a></dd>
				<dt>05/11/2011</dt>
					<dd>- New option: <a href="index.php?type_navigation=dots_preview">preview to go over the points</a> .</dd>
					<dd>- Bug fixed: problem of memory consumption to blur the window with skitter working. <strong>Hint of <a href="http://thiagosf.net/projects/jquery/skitter/#comment-355473307">Dan Partac</a></strong></dd>
				<dt>28/10/2011</dt>
					<dd>- New options: alignment of numbers, dots and thumbs.</dd>
				<dt>08/09/2011</dt>
					<dd>- New animations: <a href="?animation=circles">circles</a>, <a href="?animation=circlesInside">circlesInside</a> and <a href="?animation=circlesRotate">circlesRotate</a></dd>

					<dd>- Callback onLoad: calling a user-defined function to load images</dd>
					<dd>- Added <a href="https://github.com/zachstronaut/jquery-animate-css-rotate-scale">rotate-scale plugin</a>: to the effect of rotation</dd>
				<dt>05/08/2011</dt>
					<dd>- New animations: <a href="?animation=glassCube">glassCube</a>, <a href="?animation=glassBlock">glassBlock</a></dd>

					<dd>- Bug fixed hideTools</dd>
				<dt>30/05/2011</dt>
					<dd>- Display <a href="multiple.php">multiple instances</a> on the same page!</dd>
				<dt>28/05/2011</dt>
					<dd>- New animation: <a href="?animation=randomSmart">randomSmart</a></dd>

					<dd>- Change in the animation: <a href="?animation=random">random</a></dd>
					<dd>- New mode: <a href="index.php?other_options=show_randomly">ramdomly sliders</a>. <strong>Hint of <a href="http://blog.it0091.com/2011/04/28/jquery-skitter-slideshow-display-images-randomly-on-each-page/" target="_blank">Team IT0091</a></strong></dd>
					<dd>- <strong>jQueryUI</strong> removed and added plugins compatible: <strong>jQuery easing</strong> and <strong>jQuery animate colors</strong></dd>

				<dt>15/05/2011</dt>
					<dd>- Added <a href="http://wordpress.org/extend/plugins/wp-skitter-slideshow/">plugin</a> for Wordpress</dd>
				<dt>09/05/2011</dt>
					<dd>- Control over the width of the label. <strong>Hint of Ronny</strong></dd>
				<dt>08/05/2011</dt>

					<dd>- <a href="index.php?type_navigation=dots">Navigation with dots</a></dd>
					<dd>- New animation: <a href="?animation=cubeJelly">cubeJelly</a></dd>
					<dd>- Restructuring HTML plugin</dd>
					<dd>- Bug fixed navigation thumbs</dd>
				<dt>07/05/2011</dt>

					<dd>- Added option to load <a href="index.php?type_loading=xml">data via XML</a>.</dd>
				<dt>23/04/2011</dt>
					<dd>- Added <a href="fullscreen.php">fullscreen</a> mode</dd>
				<dt>21/04/2011</dt>

					<dd>- Fixed bug in loading images in IE9</dd>
					<dd>- Update animations: <a href="?animation=directionTop">directionTop</a>, <a href="?animation=directionBottom">directionBottom</a>, <a href="?animation=directionRight">directionRight</a>, <a href="?animation=directionLeft">directionLeft</a> and <a href="?animation=block">block</a></dd>
				<dt>20/04/2011</dt>

					<dd>- Update jQuery and jQuery UI</dd>
				<dt>16/01/2011</dt>
					<dd>- New animations: <a href="?animation=cubeStopRandom">cubeStopRandom</a>, <a href="?animation=cubeSpread">cubeSpread</a></dd>
				<dt>04/01/2011</dt>
					<dd>- Update thumbnail browsing. Now the position of the mouse will move the thumbnails</dd>

					<dd>- Fix the problem with the effects: cubeStop, cubeHide, cubSize.</dd>
				<dt>09/10/2010</dt>
					<dd>- Added the type of thumbnail browsing.</dd>
				<dt>04/08/2010</dt>
					<dd>- Creation of Skitter Slideshow!</dd>
			</dl>

		</div>
		
		<h2>Next updates:</h2>
		<div id="updatelog">
			<dl>
				<dt>Option play/pause manually</dt>
				<dt>Progress bar slide actually</dt>
				<dt>Themes</dt>
			</dl>
		</div>
		
		<h2>Includes</h2>
		<pre class="code" lang="html">
// Styles
&lt;link href=&quot;css/skitter.styles.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; /&gt;

// Scripts
&lt;script src=&quot;js/jquery-1.5.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.skitter.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.easing.1.3.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.animate-colors-min.js&quot;&gt;&lt;/script&gt;

</pre>
		
		<h2>Javascript</h2>
		<pre class="code" lang="js">
$(function(){
	$('.box_skitter_large').skitter();
});
</pre>

		<h2>HTML</h2>
		<pre class="code" lang="html">
&lt;div class=&quot;box_skitter box_skitter_large&quot;&gt;

	&lt;ul&gt;
		&lt;li&gt;
			&lt;a href=&quot;http://thiagosf.net&quot;&gt;&lt;img src=&quot;images/01.jpg&quot; class=&quot;block&quot; /&gt;&lt;/a&gt;

			&lt;div class=&quot;label_text&quot;&gt;
				&lt;p&gt;Label&lt;/p&gt;
			&lt;/div&gt;
		&lt;/li&gt;
		&lt;li&gt;

			&lt;a href=&quot;http://cakephp.org&quot;&gt;&lt;img src=&quot;images/02.jpg&quot; class=&quot;cube&quot; /&gt;&lt;/a&gt;
			&lt;div class=&quot;label_text&quot;&gt;
				&lt;p&gt;Label&lt;/p&gt;

			&lt;/div&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;a href=&quot;http://jquery.com&quot;&gt;&lt;img src=&quot;images/03.jpg&quot; class=&quot;default&quot; /&gt;&lt;/a&gt;

			&lt;div class=&quot;label_text&quot;&gt;
				&lt;p&gt;Label&lt;/p&gt;
			&lt;/div&gt;
		&lt;/li&gt;
	&lt;/ul&gt;

&lt;/div&gt;
</pre>

		<h2>XML</h2>
		<pre class="code" lang="html">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;skitter&gt;

	&lt;slide&gt;
		&lt;link&gt;#directionTop&lt;/link&gt;
		&lt;image type=&quot;directionTop&quot;&gt;images/001.jpg&lt;/image&gt;
		&lt;label&gt;&lt;![CDATA[&lt;p&gt;directionTop&lt;/p&gt;]]&gt;&lt;/label&gt;

	&lt;/slide&gt;
	&lt;slide&gt;
		&lt;link&gt;#cubeSize&lt;/link&gt;
		&lt;image type=&quot;cubeSize&quot;&gt;images/002.jpg&lt;/image&gt;

		&lt;label&gt;&lt;![CDATA[&lt;p&gt;cubeSize&lt;/p&gt;]]&gt;&lt;/label&gt;
	&lt;/slide&gt;
	&lt;slide&gt;
		&lt;link&gt;#paralell&lt;/link&gt;

		&lt;image type=&quot;paralell&quot;&gt;images/003.jpg&lt;/image&gt;
		&lt;label&gt;&lt;![CDATA[&lt;p&gt;paralell&lt;/p&gt;]]&gt;&lt;/label&gt;
	&lt;/slide&gt;

&lt;/skitter&gt;
</pre>

		<div id="options">
			<h2>Extend</h2>
			<h3>Options</h3>
			
			<table> 
				<thead> 
					<tr> 
						<th>option</th> 
						<th>description</th> 
						<th>default</th> 
						<th>example</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>velocity</td> 
						<td>Velocity of animation</td> 
						<td>1</td> 
						<td><span class="code">$('.box_skitter_large').skitter({velocity: 2});</span></td> 
					</tr>
					<tr> 
						<td>interval</td> 
						<td>Interval between transitions</td> 
						<td>2500</td> 
						<td><span class="code">$('.box_skitter_large').skitter({interval: 3000});</span></td> 
					</tr>
					<tr> 
						<td>animation</td> 
						<td>Default animation</td> 
						<td>null or defined in &lt;a&gt; class</td> 
						<td><span class="code">$('.box_skitter_large').skitter({animation: 'fade'});</span></td> 
					</tr>
					<tr> 
						<td>numbers</td> 
						<td>Numbers display</td> 
						<td>true</td> 
						<td><span class="code">$('.box_skitter_large').skitter({numbers: false});</span></td> 
					</tr>
					<tr> 
						<td>navigation</td> 
						<td>Navigation display</td> 
						<td>true</td> 
						<td><span class="code">$('.box_skitter_large').skitter({navigation: false});</span></td> 
					</tr>
					<tr> 
						<td>label</td> 
						<td>Label display</td> 
						<td>true</td> 
						<td><span class="code">$('.box_skitter_large').skitter({label: false});</span></td> 
					</tr>
					<tr> 
						<td>easing_default</td> 
						<td>Easing default</td> 
						<td>null</td> 
						<td><span class="code">$('.box_skitter_large').skitter({easing_default: 'easeOutBack'});</span></td> 
					</tr>
					<tr> 
						<td>animateNumberOut</td> 
						<td>Animation/style number/dot</td> 
						<td>{backgroundColor:'#333', color:'#fff'}</td> 
						<td><span class="code">$('.box_skitter_large').skitter({animateNumberOut: {backgroundColor:'#000', color:'#ccc'}});</span></td> 
					</tr>
					<tr> 
						<td>animateNumberOver</td> 
						<td>Animation/style hover number/dot</td> 
						<td>{backgroundColor:'#000', color:'#fff'}</td> 
						<td><span class="code">$('.box_skitter_large').skitter({animateNumberOver: {backgroundColor:'#000', color:'#ccc'}});</span></td> 
					</tr>
					<tr> 
						<td>animateNumberActive</td> 
						<td>Animation/style active number/dot</td> 
						<td>{backgroundColor:'#cc3333', color:'#fff'}</td> 
						<td><span class="code">$('.box_skitter_large').skitter({animateNumberActive: {backgroundColor:'#000', color:'#ccc'}});</span></td> 
					</tr>
					<tr>
						<td>thumbs</td> 
						<td>Navigation with thumbs</td> 
						<td>false</td> 
						<td><span class="code">$('.box_skitter_large').skitter({thumbs: true});</span></td> 
					</tr>
					<tr> 
						<td>hideTools</td> 
						<td>Hide numbers and navigation</td> 
						<td>false</td> 
						<td><span class="code">$('.box_skitter_large').skitter({hideTools: true});</span></td> 
					</tr>
					<tr> 
						<td>fullscreen</td> 
						<td>Fullscreen mode</td> 
						<td>false</td> 
						<td><span class="code">$('.box_skitter_large').skitter({fullscreen: true});</span></td> 
					</tr>
					<tr> 
						<td>xml</td> 
						<td>Loading data from XML file</td> 
						<td>false</td> 
						<td><span class="code">$('.box_skitter_large').skitter({xml: "xml/slides.xml"});</span></td> 
					</tr>
					<tr> 
						<td>dots</td> 
						<td>Navigation with dots</td> 
						<td>false</td> 
						<td><span class="code">$('.box_skitter_large').skitter({dots: true});</span></td> 
					</tr>
					<tr> 
						<td>width_label</td> 
						<td>Width label</td> 
						<td>null</td> 
						<td><span class="code">$('.box_skitter_large').skitter({width_label: '300px'});</span></td> 
					</tr>
					<tr> 
						<td>show_randomly</td> 
						<td>Randomly sliders</td> 
						<td>false</td> 
						<td><span class="code">$('.box_skitter_large').skitter({show_randomly: true});</span></td> 
					</tr>
					<tr> 
						<td>onLoad</td> 
						<td>Callback</td> 
						<td>null</td> 
						<td><span class="code">$('.box_skitter_large').skitter({onLoad: function() { console.log('start!') } });</span></td> 
					</tr>
					<tr> 
						<td>numbers_align</td> 
						<td>Alignment of numbers/dots/thumbs</td> 
						<td>left</td> 
						<td><span class="code">$('.box_skitter_large').skitter({numbers_align: 'center'});</span></td> 
					</tr>
					<tr> 
						<td>preview</td> 
						<td>Preview with dots</td> 
						<td>false</td> 
						<td><span class="code">$('.box_skitter_large').skitter({dots: true, preview: true});</span></td> 
					</tr>
					<tr> 
						<td>focus</td> 
						<td>Focus slideshow</td> 
						<td>false</td> 
						<td><span class="code">$('.box_skitter_large').skitter({focus: true});</span></td> 
					</tr>
					<tr> 
						<td>focus_position</td> 
						<td>Position of button focus slideshow</td> 
						<td>center</td> 
						<td><span class="code">$('.box_skitter_large').skitter({focus_position: 'leftTop'});</span></td> 
					</tr>
					<tr> 
						<td>controls</td> 
						<td>Option play/pause manually</td> 
						<td>false</td> 
						<td><span class="code">$('.box_skitter_large').skitter({controls: true});</span></td> 
					</tr>
					<tr> 
						<td>controls_position</td> 
						<td>Position of button controls</td> 
						<td>center</td> 
						<td><span class="code">$('.box_skitter_large').skitter({controls_position: 'rightBottom'});</span></td> 
					</tr>
				</tbody> 
			</table>
		</div>
	</div>
	
	<div id="footer">
		<p>Thiago S.F.</p>
		<p><a href="http://thiagosf.net">thiagosf.net</a></p>
	</div>
	
</div>
</body>
</html>